<template>
  <view>
    <block v-for="(item, index) in chatCardList" :key="index">
      <view class="compare-box" @click.stop="sureClickCall"
      v-if="item.type == 303"
      :data-spmCntSuffix="'ChatAiPage.hotelCompare@1.click'"
      :data-custom="1"
      :data-spm="1">
        <view class="compare-title">
          <img
            class="compare-img"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-09-19/compareTitle.png"
          />
        </view>
        <view class="content-box">
          <view class="content-title">{{item.args.cardTitle.content}}</view>
          <view class="content-flex">
            <view class="content-item" v-for="(listItem,listIndex) in item.args.cardContent" :key="'list.'+listIndex">
              <view class="item-title">{{listItem.title}}</view>
              <view class="item-box">
                <img
                  class="box-icon"
                  src="https://cdn1.visiotrip.com/h5AndMini/2024-01-09/compare_icon_1.png"
                />
                <view class="hotel-title">
                  <img class="hotel-icon" :src="listItem.platformIcon" alt="" srcset="">
                  <view class="hotel-name">{{listItem.platformName}}</view>
                </view>
                <view class="hotel-price">
                  <text class="price-code">{{listItem.currencyCode}}</text
                  ><text class="price">{{listItem.price}}</text>
                </view>
                <view class="time">{{listItem.time}}</view>
                <view class="icon-list" v-if="listItem.plateformList.length > 0">
                  <img v-for="(iconItem,iconIndex) in listItem.plateformList" 
                    :key="'icon.'+iconIndex" 
                    class="icon-box"
                    :class="{'active' : iconIndex > 0}"
                    :src="iconItem.platformIcon">
                  <text class="icon-text">{{ listItem.plateformList.length }}家比</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="compare-box active" @click.stop="sureClickCall"
      v-if="item.type == 304"
      :data-spmCntSuffix="'ChatAiPage.hotelCompare@2.click'"
      :data-custom="1"
      :data-spm="1">
        <block v-for="(listItem,listIndex) in item.args.cardContent" :key="'list2.'+listIndex">
          <view class="txt-box">
            <img class="titleImage" :src="listItem.titleImage" alt="" srcset="">
            <rich-text style="font-size: 24rpx;" :nodes="listItem.contentText"></rich-text>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>
  
<script>
export default {
  components: {},
  props: {
    chatCardList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {
    sureClickCall(){
      this.$emit('callBack')
    }
  },
};
</script>
  
<style lang="scss" scoped>
.compare-box {
  width: 100%;
  border-radius: 26rpx;
  margin-top: 22rpx;
  min-height: 112rpx;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 26rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10.8695652173913px);
  &.active {
    padding: 0 0 24rpx 0;
  }
  .compare-title {
    width: 100%;
    height: 120rpx;
    border-radius: 26rpx 26rpx 0 0;

    .compare-img {
      width: 100%;
      height: 100%;
    }
  }

  .content-box {
    width: 100%;
    height: 424rpx;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 26rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10.8695652173913px);
    margin-top: -36rpx;

    .content-title {
      color: $sl-color-dark-grey;
      font-size: 32rpx;
      padding: 24rpx 0 0 24rpx;
      font-weight: 600;
      line-height: 46rpx;
    }

    .content-flex {
      display: flex;
      padding: 24rpx;
      justify-content: space-between;

      .content-item {
        width: 49%;
        height: 310rpx;
        background: #e5ebff;
        border-radius: 16rpx;

        .item-title {
          width: 100%;
          height: 64rpx;
          border-radius: 16rpx 16rpx 0 0;
          color: $sl-color-grey;
          font-size: 24rpx;
          line-height: 64rpx;
          text-align: center;
        }

        .item-box {
          width: 100%;
          height: 246rpx;
          background: #fffbfb;
          border-radius: 16rpx;
          border: 2rpx solid #ff97c1;
          position: relative;

          .box-icon {
            position: absolute;
            width: 96rpx;
            height: 28rpx;
            top: -1rpx;
            left: -1rpx;
          }

          .hotel-title {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 48rpx;

            .hotel-icon {
              width: 32rpx;
              height: 32rpx;
            }

            .hotel-name {
              color: $sl-color-dark-grey;
              font-size: 24rpx;
              margin-left: 4rpx;
              line-height: 24rpx;
            }
          }

          .hotel-price {
            display: flex;
            align-items: baseline;
            justify-content: center;
            padding-top: 12rpx;

            .price-code {
              color: #f93f55;
              font-size: 24rpx;
            }

            .price {
              color: #f93f55;
              font-size: 36rpx;
            }
          }

          .time {
            padding-top: 8rpx;
            color: #767697;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .icon-list{
            padding-top: 26rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-box{
              width: 28rpx;
              height: 28rpx;
              &.active{
                margin-left: -12rpx;
              }
            }
            .icon-text{
              color: #767697;
              font-size: 20rpx;
              padding-left: 8rpx;
            }
          }
        }
      }
    }
  }
  .txt-box {
    // width: 454rpx;
    min-height: 40rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 24rpx 24rpx 0 24rpx;
    padding: 20rpx;
    .titleImage{
      width: 140rpx;
      height: 28rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
  